<!--
 * @Author: 刘佳欢 2173558681@qq.com
 * @Date: 2022-11-16 20:17:58
 * @LastEditors: 刘佳欢 2173558681@qq.com
 * @LastEditTime: 2025-09-28 16:58:19
 * @FilePath: \团队项目\am-ui\src\views\dashboard\components\C221.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="chart-box" ref="c221">
  </div>
</template>

<script>
import { Pie } from '@antv/g2plot';
import { get } from '@/utils/request';

export default {
  data() {
    return {
      empData: []
    };
  },
  methods: {
    loadPie() {
      // 注意这里的容器选择器，要使用正确的 DOM 引用
      const piePlot = new Pie(this.$refs.c221, {
        appendPadding: 10,
        data: this.empData, // 使用组件内的数据
        angleField: 'value',
        colorField: 'type',
        color: ({ type }) => {
          if (type === '在线') {
            return '#F0E68C';
          }
          return '#87CEEB';
        },
        radius: 0.8,
        innerRadius: 0.6,
        label: {
          type: 'outer',
          content: '{name}\n{value}台',
          style: {
            // textAlign: 'center',
            fontSize: 11,
            fill: '#333'
          },
          offset: 10,
        },
        interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
        statistic: {
          title: false,
          content: {
            style: {
              whiteSpace: 'pre-wrap',
              fontSize:14,
              fontWeight:'bold',
              // overflow: 'hidden',
              // textOverflow: 'ellipsis',
            },
            content:`设备总数\n${this.empData.reduce((sum,item)=>sum+item.value,0)}台`
            // content: '设备总数\n{value}台',
          },
        },
      });

      piePlot.render();
    },
    
    async getEmpData() {
      try {
        let res = await get('/dashboard/queryDeviceOnlineNumber');
        this.empData = res.data;
        // 数据获取后再渲染饼图
        this.loadPie();
      } catch (error) {
        console.error('获取数据失败：', error);
      }
    }
  },
  mounted() {
    this.getEmpData();
  }
}
</script>

<style scoped>
.chart-box {
  width: 356px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: right;
  margin-bottom: 10px;
}
</style>